Web Development Split View এবং Panel Layouts তৈরি গাইড ও নোট

Framework7 দিয়ে আপনি মোবাইল এবং ওয়েব অ্যাপ্লিকেশনে Split View এবং Panel Layouts তৈরি করতে পারেন। এই ফিচারগুলো সাধারণত এমন অ্যাপ্লিকেশনে ব্যবহৃত হয় যেখানে বড় স্ক্রিন (ট্যাবলেট বা ডেস্কটপ) এবং ছোট স্ক্রিনের (মোবাইল) জন্য ভিন্ন ভিন্ন লেআউট দরকার হয়।

Split View তৈরি

Split View সাধারণত বড় স্ক্রিনে সাইড মেনু বা নেভিগেশন এবং মূল কন্টেন্ট একসাথে প্রদর্শনের জন্য ব্যবহৃত হয়। Framework7 Split View কে Resizable Split View হিসেবেও সমর্থন করে।

Split View HTML উদাহরণ

<div id="app">
  <!-- Split View -->
  <div class="view view-left panel panel-left panel-reveal">
    <div class="page">
      <div class="page-content">
        <p>Left Panel Content</p>
        <ul>
          <li><a href="/about/">About</a></li>
          <li><a href="/contact/">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Main View -->
  <div class="view view-main">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Main Content</div>
        </div>
      </div>
      <div class="page-content">
        <p>This is the main content area.</p>
      </div>
    </div>
  </div>
</div>

Split View CSS উদাহরণ

.view-left {
  width: 300px;
  max-width: 30%;
  border-right: 1px solid #ccc;
}

.view-main {
  margin-left: 300px;
}

Split View কনফিগারেশন (JavaScript)

var app = new Framework7({
  root: '#app',
  routes: [
    { path: '/about/', url: './pages/about.html' },
    { path: '/contact/', url: './pages/contact.html' },
  ],
});

Panel Layouts তৈরি

Panel Layouts Framework7-এ মোবাইল এবং ট্যাবলেটের জন্য ড্রয়ার বা সাইড মেনু হিসেবে কাজ করে। আপনি Left Panel, Right Panel, এবং Resizable Panels তৈরি করতে পারেন।

Left Panel Layout উদাহরণ

<div id="app">
  <!-- Left Panel -->
  <div class="panel panel-left panel-cover">
    <div class="page">
      <div class="page-content">
        <p>This is the Left Panel</p>
        <ul>
          <li><a href="/about/">About</a></li>
          <li><a href="/contact/">Contact</a></li>
        </ul>
      </div>
    </div>
  </div>

  <!-- Main View -->
  <div class="view view-main">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Main Content</div>
        </div>
      </div>
      <div class="page-content">
        <p>This is the main content area.</p>
        <a class="button panel-open" href="#" data-panel="left">Open Left Panel</a>
      </div>
    </div>
  </div>
</div>

Panel Layout কনফিগারেশন (JavaScript)

var app = new Framework7({
  root: '#app',
  panel: {
    swipe: 'left', // সাইড প্যানেল সোয়াইপ করে খুলতে সক্ষম
  },
  routes: [
    { path: '/about/', url: './pages/about.html' },
    { path: '/contact/', url: './pages/contact.html' },
  ],
});

Resizable Split View তৈরি

Resizable Split View এর মাধ্যমে ব্যবহারকারীরা সাইড প্যানেল এবং মেইন কন্টেন্টের আকার পরিবর্তন করতে পারেন।

Resizable Split View HTML উদাহরণ

<div id="app">
  <!-- Resizable Split View -->
  <div class="view view-left panel panel-left resizable">
    <div class="page">
      <div class="page-content">
        <p>Resizable Left Panel Content</p>
      </div>
    </div>
  </div>

  <!-- Main View -->
  <div class="view view-main">
    <div class="page">
      <div class="navbar">
        <div class="navbar-inner">
          <div class="title">Main Content</div>
        </div>
      </div>
      <div class="page-content">
        <p>This is the main content area.</p>
      </div>
    </div>
  </div>
</div>

Resizable Split View CSS উদাহরণ

Framework7 নিজে থেকেই Resizable Split View এর CSS সংযুক্ত করে, তবে আপনি কাস্টমাইজ করতে পারেন।

Resizable Split View কনফিগারেশন (JavaScript)

var app = new Framework7({
  root: '#app',
  panel: {
    resizable: true,
  },
  routes: [
    { path: '/about/', url: './pages/about.html' },
    { path: '/contact/', url: './pages/contact.html' },
  ],
});

মোবাইল এবং ডেক্সটপের জন্য উপযোগিতা

• Mobile Devices: Panel Layout মোবাইল অ্যাপ্লিকেশনের জন্য আদর্শ। ড্রয়ার মেনু এবং সোয়াইপ প্যানেল ব্যবহার করে ব্যবহারকারীদের সহজে নেভিগেট করার সুযোগ দেয়।
• Desktop/Tablets: Split View বড় স্ক্রিনের জন্য উপযুক্ত, যেখানে নেভিগেশন এবং কন্টেন্ট একসাথে প্রদর্শিত হয়।

Framework7 এর Split View এবং Panel Layouts অ্যাপ্লিকেশনের ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং মোবাইল ও বড় স্ক্রিনের উভয়ের জন্য কার্যকর ডিজাইন সরবরাহ করে।